<script setup lang="ts">
import { transportStatusTextMap } from "@/common/map";
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const props = defineProps<{
	type?: "show" | "edit";
	showTitle?: boolean;
	data: object;
	simple?: boolean;
	unnessary?: boolean;
}>();

const formRef = ref(null);

const formState = reactive({
	carrier: props.unnessary ? "T86 EXPRESS INC" : "",
	name: "",
	phone: "",
	trainNumber: "",
	seal: "",
	trailer: "",
	purchaseOrder: "",
});

const validate = async () => {
	try {
		const rs = await formRef.value?.validate();
		return rs;
	} catch (error) {
		console.log(error);
		return false;
	}
};

const getValues = () => {
	return formState;
};

const setValues = (val) => {
	Object.assign(formState, val);
};

defineExpose({
	validate,
	getValues,
	setValues,
});
</script>

<template>
	<Card class="storage-card-container">
		<template v-if="props.showTitle">
			<view class="title">基础信息</view>
		</template>

		<template v-if="props.type === 'show'">
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">运输商</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.carrier)
				}}</wd-col>
			</wd-row>
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">姓名</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.name)
				}}</wd-col>
			</wd-row>
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">电话</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.phone)
				}}</wd-col>
			</wd-row>
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">车次</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.trainNumber)
				}}</wd-col>
			</wd-row>
			<wd-row class="row" v-if="!props.simple">
				<wd-col :span="uiConfig.labelSpan">拖车</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.trailer)
				}}</wd-col>
			</wd-row>
			<wd-row class="row" v-if="!props.simple">
				<wd-col :span="uiConfig.labelSpan">封条</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.seal)
				}}</wd-col>
			</wd-row>
			<wd-row class="row" v-if="!props.simple">
				<wd-col :span="uiConfig.labelSpan">采购方订单</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.purchaseOrder)
				}}</wd-col>
			</wd-row>
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">运输状态</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					transportStatusTextMap[props.data?.transportStatus]
				}}</wd-col>
			</wd-row>

			<slot name="extra"></slot>
		</template>

		<template v-else-if="props.type === 'edit'">
			<wd-form ref="formRef" :model="formState" class="storage-form">
				<wd-cell-group :border="true">
					<wd-input
						label="运输商"
						prop="carrier"
						clearable
						v-model="formState.carrier"
						placeholder="运输商名称"
						:rules="[{ required: !props.unnessary, message: '请输入运输商名称' }]"
					/>
					<wd-input
						label="姓名"
						prop="name"
						clearable
						v-model="formState.name"
						placeholder="姓名"
						:rules="[{ required: !props.unnessary, message: '请输入姓名' }]"
					/>
					<wd-input
						label="电话"
						prop="phone"
						clearable
						v-model="formState.phone"
						placeholder="电话"
						:rules="[{ required: !props.unnessary, message: '请输入电话' }]"
					/>
					<wd-input
						label="车次"
						prop="trainNumber"
						clearable
						v-model="formState.trainNumber"
						placeholder="车次"
						:rules="[{ required: !props.unnessary, message: '请输入车次' }]"
					/>
					<wd-input
						label="拖车"
						prop="trailer"
						clearable
						v-model="formState.trailer"
						placeholder="拖车"
						:rules="[{ required: !props.unnessary, message: '请输入拖车' }]"
					/>
					<wd-input
						label="封条"
						prop="seal"
						clearable
						v-model="formState.seal"
						placeholder="封条"
						:rules="[{ required: !props.unnessary, message: '请输入封条' }]"
					/>
					<wd-input
						label="采购方订单"
						prop="purchaseOrder"
						clearable
						v-model="formState.purchaseOrder"
						placeholder="采购方订单"
						:rules="[{ required: !props.unnessary, message: '请输入采购方订单' }]"
					/>
				</wd-cell-group>
			</wd-form>
		</template>
	</Card>
</template>

<style lang="less">
@import url("./style/card.less");
@import url("./style/row.less");
@import url("./style/form.less");
</style>
